<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=no">
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<style type="text/css">
		.searchResultContent > div{
			display: none;
			max-width: 800px;
		}
		.searchResultTab > a{
			display: inline-block;
			height: 60px;
			width: 120px;
			border: 1px solid;
		}
		.searchResultContentP > div{
			display: none;
			max-width: 800px;
		}
		.searchResultTabP > a{
			display: inline-block;
			height: 60px;
			width: 120px;
			border: 1px solid;
		}
		.active{
			background-color: green;
			color: white;
			font-stretch: wider;
		}
		iframe{
			width: 800px;
			height: 800px;
		}
		.boxes{font-size:14px;font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;}

		</style>
	</head>
	<body>
		<div>
			<div style="float:left">
				<span>图片总共</span><span id="totalCount"></span>
				<span style="color:green">已处理</span><span id="isMarkCount" style="color:green"></span>
				<span style="color:red">未处理</span><span id="noMarkCount" style="color:red"></span>
			</div>
			<center>
				<div>
					<div id="img_ocrDiv"></div>
					<div id="img_nameDiv"></div>
					<input type="text" id="img_name" hidden />
					<br>
				</div>
			</center>
			<center>
			<br>
			<!--
			<input type="file" id="uploadImageFile"></input>
			<img id="preImg" src="" width="600" height="200"/>
			-->
				<div id="is_esDiv" hidden><input type="checkbox" id="is_es" ><font color="red">存在ES库</font>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<button id="markSubmit" style="background-color: Beige">提交标记</button><label id="markSubmitMsg"><font color="red"></font></label>
				</div>
				<br>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<button id="start" style="background-color: Gold">点击开始下一张测试图片</button>
				<br>
				<br>
				<button id="submitButton">OCR执行</button>
				<br>
				<div id="searchResultDiv"></div>
				<br>
				<button id="esButton">ES搜索</button>
				<br>
				<div id="esResultDiv" style='width: 600px;display:block;word-break: break-all;word-wrap: break-word;'></div>
			</center>
			
			<script>
			$(function(){
				//var baseUrl = "http://localhost:27000/ocrmark";
				var baseUrl = "http://192.168.1.75:27000/ocrmark";


				$('#start').click(function(){
					$.ajax({
						type: 'POST',
						dataType: 'json',
						url: baseUrl + "/resource/questionSearch/getOneImgEs",
						timeout: 120000,
						error: function(){
							alert("网络错误")
						},
						success: function(data){
							if(data.status == '1'){
								var name = data.value.img.name;
								var imgBase64 = data.value.img.imgBase64;
								$('#img_name').val(name);
								$('#img_nameDiv').html(name)
								$('#img_ocrDiv').html(imgBase64);
								$("#markSubmitMsg").html('');
								$('#searchResultDiv').html('');
								$('#esResultDiv').html('');
								$('#start').hide();
								$('#is_esDiv').hide();
								$('#is_es').removeAttr("checked")
								$("#totalCount").html(data.value.deal.totalCount);
								$("#isMarkCount").html(data.value.deal.isMarkCount);
								$("#noMarkCount").html(data.value.deal.noMarkCount);

							}else{
								alert(data.msg);
							}
						}

					});
				});


				$('#submitButton').click(function(){
					ocr();
				});
				
				
				$('#esButton').click(function(){
					var ocr = $('#ocrText').val();
					$.ajax({
						processData: false,
						contentType: false,
						cache: false,
						type: 'POST',
				        dataType: 'json',
						contentType : "application/json",
				        url: baseUrl + "/resource/questionSearch/esQuestionByText",
				        data: ''+JSON.stringify({ocr:ocr}),
						async: true,
						timeout: 120000,
						error: function(){
							alert("网络错误")
						},
				        success: function(data){
				        	if(data.status == '1'){
				        		var esRs = data.value.esRs;
								var html = '';
				        		for(var i = 0; i < esRs.length; i++){
				        			var es = esRs[i];
				        			var id = es._source.id;
									html += es._source.text + '<br>'
									html += '<a href="http://onlinelibres.noahedu.com/NRMP_TEST/question/view/simple_view/'+id+'" target="_blank">题目详情</a><br><br><hr>';
				        		}
				        		$('#esResultDiv').html(html);
				        		$('#is_esDiv').show();
				        	}
				        	else{
				        		alert(data.msg);
				        	}
				        }
					})
					
				});


				$('#markSubmit').click(function(){
					var esflag = $('#is_es').is(':checked');
					var is_es = "0";
					if(esflag == true){
						is_es = "1";
					}
					var img_name = $('#img_name').val();

					var param = {img_name:img_name,is_es:is_es};
					$.ajax({
						type: "post",
						url: baseUrl + "/resource/questionSearch/updateMarkEs",
						dataType : "json",
						contentType : "application/json",
						data: ''+JSON.stringify(param),
						success: function (result) {
							if(result.status == '1'){
								$("#markSubmitMsg").html('<font color="green">[提交成功]</font>');
							}else{
								$("#markSubmitMsg").html('<font color="red">'+result.msg+'</font>');
							}
						}
					});
					$('#start').show();

				});
				
				
			   $("#uploadImageFile").change(function () {
					var $file = $(this);
					var fileObj = $file[0];
					var windowURL = window.URL || window.webkitURL;
					var dataURL;
					var $img = $("#preImg");

					if (fileObj && fileObj.files && fileObj.files[0]) {
						dataURL = windowURL.createObjectURL(fileObj.files[0]);
						$img.attr('src', dataURL);
					} else {
						dataURL = $file.val();
						var imgObj = document.getElementById("preImg");
						// 两个坑:
						// 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性在加入，无效；
						// 2、src属性需要像下面的方式添加，上面的两种方式添加，无效；
						imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
						imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;

					}
				});
				
				
				
				function ocr() {
					var img_name = $('#img_name').val();
					$.ajax({
						processData: false,
						contentType: false,
						cache: false,
						type: 'POST',
				        dataType: 'json',
				        url: baseUrl + "/resource/questionSearch/ocrQuestionByName?name="+img_name,
				        data: "",
						async: true,
						timeout: 120000,
						error: function(){
							alert("网络错误")
						},
				        success: function(data){
				        	if(data.status == '1'){
				        		var ocrRs = data.value.ocrRs;
				        		var html = '';
								html += '<hr>OCR结果：<br>';
								html += '<textarea class="boxes" rows="5" cols="150" id="ocrText" >' +ocrRs + '</textarea>';
				        		$('#searchResultDiv').html(html);
				        	}
				        	else{
				        		alert(data.msg);
				        	}
				        }
					})
				}
			});
			</script>
		</div>
		
	</body>
</html>
